<template>
  <div id="app">
    <nav>
      <router-link to="/">主页</router-link>
      <router-link to="/random-wheel">选择转盘</router-link>
      <router-link to="/unit-converter">单位换算</router-link>
      <router-link to="/bmi">BMI计算</router-link>
      <router-link to="/fortune">运势推送</router-link>
      <router-link to="/morse">摩斯密码</router-link>
      <router-link to="/virtual-cat">虚拟猫咪</router-link>
    </nav>
    <router-view/>  <!-- 路由匹配的组件将渲染在这里 -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      navStyle: {
      }
    }
  },
  watch: {
    $route(to) {
      this.updateNavColor(
          to.meta.bg || '#ffffff',
          to.meta.prColor || '#4a6cf7',
          to.meta.ttColor || '#4a6cf7',
          to.meta.bgColor || '#ffffff',
          to.meta.hlColor || '#ffffff',
      )
    }
  },
  methods: {
    updateNavColor(bg,prColor,ttColor,bgColor,hlColor) {
      document.documentElement.style.setProperty('--bg', bg)
      document.documentElement.style.setProperty('--primary-color', prColor)
      document.documentElement.style.setProperty('--nav-text', ttColor)
      document.documentElement.style.setProperty('--nav-bg', bgColor)
      document.documentElement.style.setProperty('--text-color', hlColor)
    }
  }
}
</script>

<style>
/* 全局样式 */
:root {
  --bg:#ffffff;
  --nav-bg: #ffffff;
  --nav-text: #4a6cf7;
  --primary-color: #4a6cf7;
  --text-color: #ffffff;
  --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-hover: 0 10px 20px rgba(0, 0, 0, 0.5);
  --border-radius: 12px;
  --transition: all 0.2s ease;
}

body {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--bg);
  color: var(--text-color);
  margin: 0;
  padding: 0;
}

#app {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

/* 导航栏样式 */

nav {
  display: flex;
  justify-content: center;
  gap: 0.1rem;
  margin-bottom: 0.5rem;
  padding: 1rem;
  background-color: var(--nav-bg);
  color: var(--nav-text);
  transition: var(--transition);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
}

nav:hover {
  transform: translateY(-3px);
   box-shadow: var(--shadow-hover);
  background-color: var(--nav-bg);
 }

nav a {
  color: var(--nav-text);
  text-decoration: none;
  font-weight: bold;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  transition: var(--transition);
}

nav a:hover {
  color: var(--text-color);
  background-color: var(--primary-color);
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover)
}

</style>